{template '../../header'}
{template '../../left'}

<div class="card">
    <div class="card-header">
        修改账户
    </div>
    <div class="card-body">
        <form method="post" autocomplete="off">
            <div class="row">
                <div class="col-6">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control form-control-sm" name="username" value="{$detail['username']}" style="ime-mode: disabled;" autocomplete="new-password" />
                    </div>
                    <div class="form-group">
                        <label>密码（留空不修改密码）</label>
                        <input type="password" class="form-control form-control-sm" id="password" name="password" autocomplete="new-password" placeholder="留空不修改密码" />
                        <small>为保障账号的安全，密码必须包含数字，大写字母，小写字母，特殊字符至少3种，且长度大于6位。</small>
                        <small id="strength" class="d-none align-items-center mt-1">
                            <span class="mr-2">密码安全度：</span>
                            <span id="strength_L" class="strength"></span>
                            <span id="strength_M" class="strength"></span>
                            <span id="strength_H" class="strength"></span>
                        </small>
                    </div>
                    <div class="form-group">
                        <label>用户昵称</label>
                        <input type="text" class="form-control form-control-sm" name="nickname" value="{$detail['nickname']}" autocomplete="new-password" />
                    </div>
                    <div class="form-group">
                        <label>用户姓名</label>
                        <input type="text" class="form-control form-control-sm" name="realname" value="{$detail['realname']}" autocomplete="new-password" />
                    </div>
                    <div class="form-group">
                        <label>角色</label>
                        {loop $roles $role}
                        {template './user_role_tpl'}
                        {/loop}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <button type="submit" class="btn btn-success btn-sm" id="ok"><i class="fa fa-save"></i> 保存</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<style type="text/css">
    .strength {
        width: 5rem;
        height: 0.5rem;
        border-radius: 0.25rem;
        margin-right: 0.5rem;
    }
</style>

<script type="text/javascript">
    //测试某个字符是属于哪一类.
    function CharMode(iN) {
        if (iN >= 48 && iN <= 57) //数字
            return 1;
        if (iN >= 65 && iN <= 90) //大写字母
            return 2;
        if (iN >= 97 && iN <= 122) //小写
            return 4;
        else
            return 8; //特殊字符
    }
    
    //计算出当前密码当中一共有多少种模式
    function bitTotal(num) {
        modes = 0;
        for (i = 0; i < 4; i++) {
            if (num & 1) modes++;
            num >>>= 1;
        }
        return modes;
    }
    
    //返回密码的强度级别
    function checkStrong(sPW) {
        //密码长度
        if (sPW.length <= 6)
            return 0; //密码太短
        Modes = 0;
        for (i = 0; i < sPW.length; i++) {
            //测试每一个字符的类别并统计一共有多少种模式.
            //目前未知|=的意思
            Modes |= CharMode(sPW.charCodeAt(i));
        }
        return bitTotal(Modes);
    }
    
    function pwStrength(pwd) {
        S_level = 0;
        O_color = "#eeeeee"; //白色
        L_color = "#FF0000"; //绿色
        M_color = "#FF9900"; //黄色
        H_color = "#33CC00"; //红色
        if (pwd == null || pwd == '') {
            //不用var声明变量连=号连接赋值
            Lcolor = Mcolor = Hcolor = O_color;
            $("#strength").removeClass('d-flex');
        }
        else {
            $("#strength").addClass('d-flex');
            //检查字符串安全级别返回级别数据进行判断
            S_level = checkStrong(pwd);
            //判断密码级别
            switch (S_level) {
                case 0:
                    //给每个变量赋颜色
                    Lcolor = Mcolor = Hcolor = O_color;
                case 1:
                    //给每个变量赋颜色
                    Lcolor = L_color;
                    Mcolor = Hcolor = O_color;
                    break;
                case 2:
                    //给每个变量赋颜色
                    Lcolor = Mcolor = M_color;
                    Hcolor = O_color;
                    break;
                default:
                    //给每个变量赋颜色
                    Lcolor = Mcolor = Hcolor = H_color;
            }
        }
        //向每个单元格赋颜色
        document.getElementById("strength_L").style.background = Lcolor;
        document.getElementById("strength_M").style.background = Mcolor;
        document.getElementById("strength_H").style.background = Hcolor;
        
        return S_level > 2; // 是否达到密码强度要求
    }
    
    let $password = $("#password");
    
    $password.on('input', function() {
        pwStrength($password.val());
    });
    
    $("#ok").click(function(e) {
        
        if ($password.val() && !pwStrength($password.val())) {
            $.toast('密码太过简单');
            e.preventDefault();
            return false;
        }
        
        return true;
    });
</script>

{template '../../footer'}